import React, { Component } from 'react'
import Styles from './newsDetail.less'
import { api } from 'common/js/ajax'
import { BannerNewsDetail } from 'containers/banner'
import { Link } from 'react-router-dom'
import pointer from 'components/pointer'
import Loading from 'components/loading'
function Crumb(props) {
    const NewType = ['佰钧成新闻', '行业视点', '新闻速递']
    return (
        <div className={Styles.crumb}>
            <div className={Styles.newsDetailContainer}>
                <Link to="/news" className={Styles.firstLevelDirectory}>公司新闻</Link>
                <svg className={Styles.rightArrow} t="1542161433095"viewBox="0 0 1024 1024" version="1.1" p-id="1809"><path d="M726.20478687 510.86891469c0.86295563-2.30121562-0.86295563-6.42422625-3.26005499-8.82132469l0 0L317.83496281 37.01034032c-4.79419875-4.79419875-11.98549594-7.19129812-16.77969468-2.39709938S293.86397093 46.59873687 298.65816875 51.39293562L698.97373906 511.63598656 298.65816875 971.87903655c-4.79419875 4.79419875-4.79419875 11.98549594 0 16.7796947 4.79419875 4.79419875 11.98549594 4.79419875 16.77969469-2.39709938l402.71266969-465.03724875" p-id="1810"></path></svg>
                <p className={Styles.secLevelDirectory}>{NewType[props.type - 1]}</p>
            </div>
        </div>
    )
}
class Main extends Component {
    constructor() {
        super()
        this.state = {
            news: {},
            isLoading: true,
            hot: []
        }
        this._getNews = this._getNews.bind(this)
    }
    componentDidMount() {
        this._getNews()
    }
    async _getNews() {
        this.setState({
            isLoading: true
        })
        const { newsId } = this.props
        let data = await api.get('/api/getNewsById1', {
            newsId
        })
        let news = pointer(data).data({})
        let hot = await api.get('/api/getHotNews')
        hot = pointer(hot).data([])
        let flag = 0
        this.setState({
            news,
            isLoading: false,
            hot: hot.filter((item, index) => item.id != this.props.newsId && ++flag && index < 11 - flag )
        })
    }
    componentDidUpdate(prevProps) {
        if ( prevProps.newsId !== this.props.newsId) {
            this._getNews()
        }
    }
    render() {
        const { news, hot } = this.state
        return (
            <Loading loading = {this.state.isLoading}>
                <div className={Styles.main}>
                    <div className={Styles.mainContainer}>
                        <div className={Styles.newsDetailMain}>
                            <h2 className={Styles.newsTitle}>{news.title}</h2>
                            <div className={Styles.newsMsg}>
                                <span className={Styles.day}>{new Date(news.date - 0).format('yyyy-MM-dd')}</span>
                                <span className={Styles.time}>{new Date(news.date - 0).format('hh:mm:ss')}</span>
                                <span className={Styles.author}>发布者: {news.author}</span>
                            </div>
                            <div className={Styles.main} dangerouslySetInnerHTML={{__html: news.main}}>
                            </div>
                            {/* { pointer(news).content([]).map((item) => (
                                <p className={Styles.mainItem} key={item}>{item}</p>
                            ))}
                            <img src="/static/image/newsDetail1.png" className={Styles.img1}/>
                            <div className={Styles.otherImg}>
                                <img src="/static/image/newsDetail2.png" className={Styles.img2}/>
                                <img src="/static/image/newsDetail3.png" className={Styles.img3}/>
                            </div> */}
                            <div className={Styles.siblingNews}>
                                {news.prevData ? (<Link className={Styles.prevNews} to={`/newsDetail/${news.prevData.id}/${+news.prevData.type}`}>{`上一页 : ${news.prevData.title}`}<svg t="1542161433095" className={Styles.rightArrow} viewBox="0 0 1024 1024" version="1.1" p-id="1809"><defs><style type="text/css"></style></defs><path d="M726.20478687 510.86891469c0.86295563-2.30121562-0.86295563-6.42422625-3.26005499-8.82132469l0 0L317.83496281 37.01034032c-4.79419875-4.79419875-11.98549594-7.19129812-16.77969468-2.39709938S293.86397093 46.59873687 298.65816875 51.39293562L698.97373906 511.63598656 298.65816875 971.87903655c-4.79419875 4.79419875-4.79419875 11.98549594 0 16.7796947 4.79419875 4.79419875 11.98549594 4.79419875 16.77969469-2.39709938l402.71266969-465.03724875" p-id="1810"></path></svg></Link>) : (<div className={Styles.prevNews}>上一页:无</div>)}
                                {news.nextData ? (<Link className={Styles.nextNews} to={`/newsDetail/${news.nextData.id}/${+news.nextData.type}`}>{`下一页 : ${news.nextData.title}`}<svg t="1542161433095" className={Styles.rightArrow} viewBox="0 0 1024 1024" version="1.1" p-id="1809"><defs><style type="text/css"></style></defs><path d="M726.20478687 510.86891469c0.86295563-2.30121562-0.86295563-6.42422625-3.26005499-8.82132469l0 0L317.83496281 37.01034032c-4.79419875-4.79419875-11.98549594-7.19129812-16.77969468-2.39709938S293.86397093 46.59873687 298.65816875 51.39293562L698.97373906 511.63598656 298.65816875 971.87903655c-4.79419875 4.79419875-4.79419875 11.98549594 0 16.7796947 4.79419875 4.79419875 11.98549594 4.79419875 16.77969469-2.39709938l402.71266969-465.03724875" p-id="1810"></path></svg></Link>) : (<div className={Styles.nextNews}>下一页:无</div>)}
                            </div>
                        </div>
                        <div className={Styles.hotNewsAside}>
                            <h3 className={Styles.hotNewsTitle}>热推新闻</h3>
                             {
                                 hot.map(item => (
                                     <div className={Styles.hotNewsItem} key={item.id}>
                                        <div className={Styles.hotNewsItemLeftSide}>
                                            <Link className={Styles.hotNewsItemTitle} to={`/newsDetail/${item.id}/${item.type}`}>{item.title}</Link>
                                            <div className={Styles.hotNewsItemMsg}>
                                                <span className={Styles.hotNewsItemDay}>{new Date(item.date - 0).format('yyyy-MM-dd')}</span>
                                                <span className={Styles.hotNewsItemtime}>{new Date(item.date - 0).format('hh:mm:ss')}</span>
                                            </div>
                                        </div>
                                        <img src="/static/image/newsHot.png" className={Styles.hotNewsItemImg}/>
                                     </div>
                                 ))
                             }   
                        </div>
                    </div>
                </div>
            </Loading>
        )
    }
}

export default class NewsDetail extends Component {
    render() {
        const { newsId, type } = this.props.match.params
        return (
            <div className={Styles.newsDetail}>
                <BannerNewsDetail backgroundPic="/static/image/newsBanner.png"/>
                <Crumb type={type}/>
                <Main newsId={newsId}/>                                           
            </div>
        )
    }
}
